<html>

<head>
    <title>美食介绍</title>
    <style>
        .itemtext {
            position: absolute;
            left: 0;
            bottom: 0px;
            width: 300px;
            height: 30px;
            line-height: 30px;
            vertical-align: middle;
            text-align: center;
            color: #ffffff;
            font-size: 27px;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body style="width: 1920px; 
    height: 1080px;
    margin:0px;
    background-color: #4a4a4a;" onload="init()">

    <div class="main" style="width: 1920px;
    height: 1080px;
    overflow: hidden;">
        <!--背景内容-->
        <div class="content_image" style="display: flex;" id="imgParent">
        </div>
        <!-- 简介 -->
        <div style=" position: absolute;padding: 20px; top: 0px; left: 0px; width: 440px; height: 1040px;font-size:30px;color:#fff;background-color:  rgba(0, 0, 0, 0.5); " id="itemTextIntro">
               
        </div>
        <!--下面内容-->
        <div style=" position: absolute; top: 783px; left: 0px; width: 1920px; height: 300px; z-index: 15;">
            <div style=" position: absolute; top: 75px; left: 53px; width: 60px; height: 90px" id="itemleft">
                <img src="../image/scenic/menu_l.png" width="100%" height="100%">
            </div>
            <div style=" position: absolute; top: 75px; right: 53px; width: 60px; height: 90px" id="itemright">
                <img src="../image/scenic/menu_r.png" width="100%" height="100%">
            </div>
            <!--焦点-->
            <div id="focusobj"
                style="position: absolute;top: 0px;left: 108px;width: 323px;height: 248px;background-image: url('../image/scenic/focus.png');background-repeat: no-repeat;  
                background-size: cover;  
                background-position: center; z-index: -1;">
            </div>
            <!--栏目条-->
            <div style="position: absolute; top: 12px; left:98px; width: 1725px; height: 225px; display: flex;overflow: hidden;">
                <div id="iconImageParent" style="left:23px;position: absolute;">
                </div>
            </div>
            <div style=" position: absolute; bottom:30px;  right: 30px; width: 90px; height: 30px; color: #fff; font-size: 30px;"
                id="page">
            </div>
        </div>

    </div>


</body>
<script src="../config/index.js"></script>
<script type="text/javascript">
    var langbox = {
        distance:1920,
        leftPosition:0,
        localPosition:0
    };

    var iconImageBox = {
        distance:345,
        leftPosition:0,
        localPosition:0
    }

    var focusBox = {
        distance:345,
        leftPosition:0,
        localPosition:0
    }
    document.onkeydown = function (event) {
        if (event.code == "ArrowRight") {
            changelist(1);
        }
        if (event.code == "ArrowLeft") {
            changelist(-1);
        }
        if (event.code == "Backspace") {
            doBack();
        }
    }
    function init() {
        if (allConfig.transformData) {
            if (allConfig.transformData.main) {
                menulist = allConfig.transformData.main;
                init_item();
            }
        }
    }

    
    var itembox = null;
    var menulist = [];
    function init_item() {
        if (menulist.length > 0) {
            // document.getElementById('focusobj').style.display = 'block';
            document.getElementById('page').innerHTML = (iconImageBox.leftPosition + 1) + "/" + menulist.length;

        }
         // 获取div元素  
        const divParent = document.getElementById('imgParent');
        const iconImageParent = document.getElementById('iconImageParent');
        divParent.style.height="100%"
        divParent.style.width=menulist.length*1920+"px"
        iconImageParent.style.height="225px"
        iconImageParent.style.width = menulist.length*iconImageBox.distance+"px"
        for(var j=0;j<menulist.length;j++){
            // 创建一个新的img元素  
            const img = document.createElement('img');
            // 设置img的源  
            img.src = menulist[j].intro.content[0].url; // 替换为你的图片URL  
                
            // 设置img的样式  
            img.style.width = '1920px'; // 设置宽度  
            img.style.height = '1080px'; // 设置高度 
            img.id="imageobj"+j
            divParent.appendChild(img);

            const iconDiv = document.createElement('div');
            iconDiv.style.width="300px"
            iconDiv.style.height="225px"
            iconDiv.style.position='absolute'
            const iconImg = document.createElement('img');
            const iconText = document.createElement('div');
            iconImg.src = menulist[j].icon.content[0].url; 
            iconImg.style.width = '300px'; // 设置宽度  
            iconImg.style.height = '177px'; // 设置高度
            iconImg.style.left = iconImageBox.distance*j+"px";
            iconImg.style.position='absolute'

            iconText.className = "itemtext";
            iconText.innerText = menulist[j].title.content
            iconText.style.left = iconImageBox.distance*j+"px";
            iconDiv.appendChild(iconImg)
            iconDiv.appendChild(iconText)
            iconImageParent.appendChild(iconDiv)

        }
        showfocus();
        show_page();
    }
    function showfocus() {
        if (menulist.length == 0) return false;
        document.getElementById("itemTextIntro").innerHTML=menulist[iconImageBox.leftPosition].title.text
    }

    function show_page() {
        if (menulist.length <= 1) {
            document.getElementById("itemright").style.display = 'none';
            document.getElementById("itemleft").style.display = 'none';
        } else if (iconImageBox.leftPosition == 0) {
            document.getElementById("itemright").style.display = 'block';
            document.getElementById("itemleft").style.display = 'none';
        } else if (iconImageBox.leftPosition == menulist.length - 1) {
            document.getElementById("itemright").style.display = 'none';
            document.getElementById("itemleft").style.display = 'block';
        } else {
            document.getElementById("itemright").style.display = 'block';
            document.getElementById("itemleft").style.display = 'block';
        }
    }


    function changelist(num) {
        // if (menulist.length <= 1) return false;
        // 在最右边且点击右移
        if((focusBox.leftPosition==4)&&num==1){
            if(iconImageBox.leftPosition<menulist.length-1){
                document.getElementById('iconImageParent').style.transform="translateX(-"+(iconImageBox.localPosition+iconImageBox.distance*num)+"px"+")";
                iconImageBox.localPosition = iconImageBox.localPosition+iconImageBox.distance*num;
                iconImageBox.leftPosition =iconImageBox.leftPosition+num;
            }
            
        }else if(focusBox.leftPosition==0&&num==-1){
            if(iconImageBox.leftPosition>=1){
                document.getElementById('iconImageParent').style.transform="translateX("+(iconImageBox.localPosition+iconImageBox.distance*num)+"px"+")";
                iconImageBox.localPosition = iconImageBox.localPosition+iconImageBox.distance*num;
                iconImageBox.leftPosition =iconImageBox.leftPosition+num;
            }
        }else{
            document.getElementById('focusobj').style.transform="translateX("+(focusBox.localPosition+focusBox.distance*num)+"px"+")";
            focusBox.leftPosition =focusBox.leftPosition+num;
            focusBox.localPosition = focusBox.localPosition+focusBox.distance*num;
            iconImageBox.leftPosition =iconImageBox.leftPosition+num;
        }
        showfocus();
        if((langbox.leftPosition==(menulist.length-1))&&num==1){
            return 
        }
        if(langbox.leftPosition==0&&num==-1){
            return
        }
        document.getElementById('imgParent').style.transform="translateX("+"-"+(langbox.localPosition+langbox.distance*num)+"px"+")";
        langbox.leftPosition =langbox.leftPosition+num;
        langbox.localPosition = langbox.localPosition+langbox.distance*num;
        document.getElementById("page").innerHTML = (iconImageBox.leftPosition + 1) + "/" + menulist.length;
        show_page();
    }


    function doBack() {
        window.location.href = "../app.html";
    }


</script>

</html>